/******************* Image widget styles *******************/

.perseus-image-widget {
    margin-inline: auto;
}
.perseus-image-widget .perseus-image-title {
    text-align: center;
}
/* Reset default paragarph margins. */
.perseus-image-widget .perseus-image-title .paragraph {
    margin-block: 0;
}
.perseus-image-widget .perseus-image-caption {
    color: var(--wb-semanticColor-core-foreground-neutral-subtle);
    padding-left: 16px;
    position: relative;
}
.perseus-image-widget .perseus-image-caption .paragraph {
    font-size: var(--wb-font-body-size-small);
    line-height: var(--wb-font-body-lineHeight-small);
    padding-right: 12px;
    margin-block: 0;
}
.perseus-image-modal-title .paragraph .paragraph {
    font-size: var(--wb-font-heading-size-medium);
    line-height: var(--wb-font-heading-lineHeight-medium);
}
.perseus-image-modal-description .perseus-renderer .paragraph {
    /* Reset default Renderer margins for the description and caption. */
    margin: 0px 0px;
}

/******************* Image widget editor styles *******************/

.perseus-image-editor .label-settings td {
    padding: 5px 4px;
    text-align: center;
}
.perseus-image-editor .label-settings tr:nth-child(odd) td {
    background-color: var(--wb-semanticColor-core-transparent);
}
.perseus-image-editor .label-settings th,
.perseus-image-editor .label-settings td {
    border-width: 0;
}
.perseus-image-editor .image-settings,
.perseus-image-editor .graph-settings {
    margin-top: 5px;
}
/* This prevents the image from overflowing its container in editor previews */
.perseus-image-preview-container .image-loader-img {
    overflow: hidden;
    max-width: 100%;
    height: auto;
    display: block;
}

/******************* Perseus hint renderer styles *******************/
/* Note: all alignment styling are defined in widget-container.css */

.perseus-hint-renderer .perseus-image-widget {
    margin-inline-start: 0;
}
.perseus-hint-renderer .svg-image {
    margin-inline-start: 0;
}
